<template>
  <div class="large-page-table" id="large-page-table">
    <div class="layer" data-depth-x="-0.16" data-depth-y="-0.1">
      <div class="table-img" ref="mychart_large"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import * as echarts from 'echarts';
import Parallax from 'parallax-js';

import getData from './getData'
let data = getData() // Echarts 图表数据

const mychart_large = ref(); // Echarts 图表相关

onMounted(() => {
  let w_height = window.innerHeight < 720 ? 720 : window.innerHeight; // 响应式获取高度
  mychart_large.value.style.height = w_height - 80 + "px";

  let large_page_table = document.getElementById('large-page-table'); // 视察插件相关
  let parallax = new Parallax(large_page_table);
  parallax;

  init(); // 初始化图表
})

/**
 * 初始化图表函数
 */
function init() {
  var myChart = echarts.init(mychart_large.value);

  // 将 svg 图片导入并赋给 option
  get('./static/img/large_map.svg', svg => {
    echarts.registerMap('demo', {
      svg: svg
    });
    var option = {
      tooltip: {
        trigger: 'item',
        textStyle: {
          fontSize: 16
        },
        formatter: getTools,
      },
      visualMap: {
        min: 0,
        max: 160,
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        color: ['orangered', 'yellow', 'lightskyblue', '#a2bbdd']
      },
      series: [{
        name: '人员情况',
        type: 'map',
        map: 'demo',
        selectedMode: false,
        data: data
      }]
    };
    myChart.setOption(option)
  })

  // 绑定 click 事件
  myChart.on('click', function(params) {
    if(params.name == "商场") {
      alert('进入商场-请佩戴口罩');
    }
    if(params.name == "公园") alert('进入公园-请保持安全距离');
  });
}

/**
 * 获取 SVG 文件信息函数
 */
function get(url, fn) {
  var ajax = new XMLHttpRequest();
  ajax.open("GET",url);
  ajax.send();
  ajax.onreadystatechange = function() {
    if(ajax.status == 200) {
      fn(ajax.responseText);
    } else {
      console.error('访问出错，请检查url路径');
    }
  }
}

/**
 * 自定义提示框回调函数
 */
function getTools(params) {
          let isTest = '';
          if(params.data.isTest == true) isTest = ' style="color: #ff725f; font-weight: 800;"';
          return '<p>' + params.data.name + '</p>' +
            '<p>人员情况：' + params.data.value + '</p>' +
            '<p>最低容纳人数：' + params.data.lowValue + '人</p>' +
            '<p>最高容纳人数：' + params.data.upValue + '人</p>' +
            '<p' + isTest + '>是否需要核酸检测：' + params.data.isTest + '</p>' +
            '<p>场所类型：' + params.data.type + '</p>'
        }
</script>

<style scoped>
  .large-page-table {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
  }

  .layer {
    pointer-events: auto;
  }

  .table-img {
    width: 96%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 2%;

    animation: table-img 2s forwards ease;
    filter: drop-shadow(10px 10px 15px rgba(60, 60, 60, 0.5));
  }

  @keyframes table-img {
    from {
      transform: rotateX(0) rotateY(0) rotateZ(2deg);
    }
    to {
      transform: rotateX(25deg) rotateY(10deg) rotateZ(-5deg);
    }
  }
</style>